<template>
	<view style="display: flex; position: relative;">
		<view class="collect-item"
		:style="{ transform: `translateX(${translateX}rpx)` }"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove"
		@touchend="handleTouchEnd">
			<view class="content">
				{{ content }}
			</view>
			<view class="form">
				{{ form }}
			</view>
		</view>
		<view class="delete" 
		v-show="isSlid" 
		:class="{showA: isSlid}"
		@click="deletefunc()">
			<image src="../../static/错误.png" 
			mode="aspectFit" 
			style="width: 50rpx;height: 50rpx;margin-top: 15rpx;">
			</image>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
import db from '../../util/db';
const startX = ref();
const translateX = ref();
const isSlid = ref();
const threshold = 100;
// 删除步骤或者收藏
async function deletefunc(){
	console.log(props.mid,props.mytype);
	if(props.mytype == 0)
	{
		db.deleteOneStep(props.mid);
	}
	else if(props.mytype == 1)
	{
		db.deleteCollectById(props.mid);
	}
	emit("delete",{id:props.mid});
}
// 触摸开始事件处理
const handleTouchStart = (event) => {
  startX.value = event.touches[0].clientX;
};
// 触摸移动事件处理
const handleTouchMove = (event) => {
  const currentX = event.touches[0].clientX;
  let diffX = currentX - startX.value;
  if (diffX < -threshold) {
    diffX = -threshold;
  }
  translateX.value = Math.min(0, diffX);
  isSlid.value = diffX <= -threshold;
};
// 触摸结束事件处理
const handleTouchEnd = () => {
  if (translateX.value <= -threshold) {
    translateX.value = -threshold;
  } else {
    translateX.value = 0;
    isSlid.value = false;
  }
};


// 定义组件的props
const props = defineProps({
  content: {
    type: String,
    default(){return "constent";}
  },
  form: {
    type: String,
    default(){return "form";}
  },
  mytype: {
    type: Number,
    default(){return 0;}
  },// 对于拉动属性，步骤为0，收藏为1
  mid: {
    type: Number,
    default(){return 0;}
  },
});
// 定义组件事件
const emit = defineEmits(["delete"]);
</script>

<style scoped>
.collect-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1rpx solid #ddd; /* 可选，用于分隔上下文本 */
}

.content {
	width: 86%;
  justify-content: flex-start;
  margin-left: 7%;
  margin-right: 7%;
  font-size: 30rpx;
  text-align: left;
}

.form {
  justify-content: flex-end;
  color: rgb(151, 155, 162);
  font-size: 25rpx;
  padding-right: 10rpx;
  text-align: right;
}
.delete
{
	position: absolute;
	right: 0%;
	width:100rpx;
	height: 100%;
	background-color:red;
	align-items: center;
	display: flex;
	flex-direction: column;
}
 .showA{
	animation: bordery 0.1s ease 1 forwards;
} 
@keyframes bordery {
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}
</style>